<template>
  <root-portal>
    <u-popup
      :show="visible"
      mode="center"
      zIndex="10089"
      round="4"
      :overlayStyle="{ zIndex: 10089 }"
      :safeAreaInsetBottom="false"
      @touchmove.stop.prevent
    >
      <div class="content">
        <div class="title">
          请选择{{ pubShopInfo.industry <= 100 ? "就餐方式" : "配送方式" }}
        </div>
        <div
          class="list"
          v-for="(item, index) in list"
          :key="item.value"
          @click="comfirmOrder(item)"
        >
          <div class="left">{{ item.title }}</div>
          <div class="right">
            <xh-img :src="returnIcon(item.value)" />
          </div>
        </div>
        <div class="close" @click="closePop()">
          <u-icon name="close-circle" color="#fff" size="28" />
        </div>
      </div>
    </u-popup>
  </root-portal>
</template>
<script>
import { mapState } from "vuex";
import { ORDER_DELIVER_METHOD } from "@/const/order";
export default {
  props: {
    visible: {
      default: false,
    },
  },
  data() {
    return {
      distributionPar: {},
      list: [],
    };
  },
  computed: {
    ...mapState("sp-store/index", [
      "pubShopId",
      "distributionType",
      "pubShopInfo",
    ]),
  },
  watch: {
    distributionType: {
      handler(value) {
        this.initDinner(value);
      },
      deep: true,
    },
  },
  mounted() {
    this.initDinner(this.distributionType);
  },

  methods: {
    // 选择配送方式之后将状态设置在vuex中
    comfirmOrder(item) {
      this.$store.commit("sp-store/index/SET_DINE", item);
      this.closePop();
      this.$emit("exportDinner");
    },
    initDinner(value) {
      this.distributionPar = value;
      this.list = value.datas;
    },
    // 关闭弹窗
    closePop() {
      this.$emit("update:visible", false);
    },
    returnIcon(title) {
      // let icon = "";
      const iconObj = {
        [ORDER_DELIVER_METHOD.PUB_LOCAL]: "img/pub/takeOut.png",
        [ORDER_DELIVER_METHOD.PUB_SELF_PICKUP]: "img/pub/mail.png",
        [ORDER_DELIVER_METHOD.PUB_PACK]: "img/pub/pack.png",
        [ORDER_DELIVER_METHOD.PUB_HALL_FOOD]: "img/pub/eatIn.png",
        [ORDER_DELIVER_METHOD.PUB_SHOP_CONSUME]: "img/pub/pickup.png",
      };
      // switch (title) {
      //   case ORDER_DELIVER_METHOD.PUB_LOCAL:
      //     icon = "img/pub/takeOut.png";
      //     break;
      //   case ORDER_DELIVER_METHOD.PUB_SELF_PICKUP:
      //     icon = "img/pub/mail.png";
      //     break;
      //   case ORDER_DELIVER_METHOD.PUB_PACK:
      //     icon = "img/pub/pack.png";
      //     break;
      //   case ORDER_DELIVER_METHOD.PUB_HALL_FOOD:
      //     icon = "img/pub/eatIn.png";
      //     break;
      //   case ORDER_DELIVER_METHOD.PUB_SHOP_CONSUME:
      //     icon = "img/pub/pickup.png";
      //     break;
      //   default:
      //     icon = "img/pub/pickup.png";
      // }
      return iconObj[title] || "img/pub/pickup.png";
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  padding: 50rpx 40rpx 50rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 29rpx;
  font-weight: bold;
  color: #131313;
  position: relative;
  .title {
    margin-bottom: 25rpx;
  }
  .list {
    display: flex;
    margin-top: 25rpx;
    justify-content: space-between;
    align-items: center;
    background: #f8f8f8;
    border-radius: 10rpx;
    padding: 35rpx 30rpx;
    width: -webkit-fill-available;
    .right {
      width: 70rpx;
      height: 70rpx;
    }
    .left {
      margin-right: 180rpx;
    }
  }
  .close {
    position: absolute;
    bottom: -100rpx;
    left: 50%;
    transform: translateX(-50%);
    font-weight: normal;
  }
}
</style>
